<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>元素的隐藏与显示</title>
    <style>
        /*
            hidden:隐藏元素,当元素隐藏起来之后,会从页面消失
                但是,原本元素所占的区域仍然被占用
            visible:显示元素,不区分元素类型
         */
        ul{
            visibility: hidden;
        }
        div,span{
            visibility: visible;
        }
    </style>
</head>
<body>
<div>这是一个div</div>
<ul>
    <li>选项</li>
    <li>选项</li>
    <li>选项</li>
</ul>
<div>这是一个div</div>
<hr>
<div>这是一个div</div>
<div>这是一个div</div>
<div>这是一个div</div>
<hr>
<span>这是一个span</span>
<span>这是一个span</span>
<span>这是一个span</span>
</body>
</html>